<template>
    <view class="wanl-withdraw">
        <view class="edgeInsetTop">
            <image
                style="width: 100%; height: 300rpx"
                :src="BaseUrl + '/static/static/common/tbg.png'"
                mode="scaleToFill"
            />
            <view class="box">
                <view class="title">可提现金额（元）</view>
                <view class="bottom">
                    <view class="num"> {{ usermoney ? usermoney : 0 }} </view>
                    <button
                        class="btnT"
                        style="width: 180rpx; height: 60rpx; line-height: 60rpx"
                        @click="goToRecord"
                    >
                        提现记录
                    </button>
                </view>
            </view>
        </view>

        <view class="padding-tb-bj" @tap="$wanlshop.to('/liu/pages/cash/bank?choice=1')">
            <view class="bank" v-if="bankData">
                <image :src="BaseUrl + `/static/images/bank/${bankData.bankCode}.png`"></image>
                <view class="content">
                    <text>{{ bankData.bankName }}</text>
                    <view class="wanl-gray">
                        <text>
                            尾号 {{ getCode(bankData.cardCode) }}
                            {{ getType(bankData.cardType) }}
                        </text>
                    </view>
                </view>
                <view class="action">
                    <text class="wlIcon-fanhui2"></text>
                </view>
            </view>
        </view>

        <view class="card">
            <view class="text-lg" style="display: flex; justify-content: space-between">
                <text>提现金额</text>
                <text @click="moneyAll" style="font-size: 24rpx; color: #999">全部提现</text>
            </view>
            <view
                class="margin-tb-bj price"
                style="padding: 20rpx 0; display: flex; align-items: center; font-size: 50rpx"
            >
                <view class="symbol">
                    <text>￥</text>
                </view>
                <input type="number" v-model="money" focus @input="replaceInput" />
                <view class="text-lg wanl-gray-light" @click="emptyInput" v-if="money">
                    <text class="wlIcon-shibai"></text>
                </view>
            </view>
        </view>
        <view class="padding-bj margin-top">
            <!-- 1.0.5升级 -->
            <button class="btn" :loading="loading" :disabled="loading" @tap="withdraw">提现</button>
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            bankData: null,
            usermoney: 0,
            money: null,
            servicemoney: 0,
            servicefee: 0,
            loading: false,
            BaseUrl,
        };
    },
    onLoad() {
        this.loadData();
    },
    methods: {
        goTo() {
            uni.navigateTo({
                url: "/liu/pages/cash/bank?choice=1",
            });
        },
        loadData() {
            this.$request.post("api/wanlshop.pay/initialWithdraw").then((res) => {
                // this.bankData = res.data.bank;
                console.log(res, "提现账户");
            });
            uni.request({
                url: BaseUrl + "/api/wanlshop.pay/getBalance",
                method: "POST",
                header: {
                    token: uni.getStorageSync("token"),
                },
                success: (res) => {
                    this.usermoney = res.data.data;
                },
            });
        },
        withdraw() {
            // 1.0.5升级 修复针对多次点击
            if (this.loading) return;
            this.loading = true;
            // 1.0.6升级
            let money = parseFloat(this.money),
                usermoney = parseFloat(this.usermoney);
            if (money <= 0) {
                // this.$wanlshop.msg("请填写正确金额");
                uni.showToast({
                    title: "请填写正确金额",
                    icon: "none",
                });
                this.loading = false;
                return;
            }
            if (money > usermoney) {
                // this.$wanlshop.msg("提现金额不能超过 " + usermoney + " 元");
                uni.showToast({
                    title: "提现金额不能超过 " + usermoney + " 元",
                    icon: "none",
                });
                this.loading = false;
                return;
            }
            this.$request
                .post("api/wanlshop.pay/withdraw", {
                    money: money,
                })
                .then((res) => {
                    this.loadData();
                    this.loading = false;
                    this.emptyInput();
                    this.$wanlshop.to("/pages/page/success?type=withdraw");
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                    // this.loadData();
                    this.loading = false;
                    // this.$wanlshop.to("/pages/page/success?type=withdraw");
                });
        },
        replaceInput(e) {
            this.money = e.target.value;
            if (this.money > this.usermoney) {
                this.money = this.usermoney;
                return;
            }
            this.servicemoney =
                e.target.value > 0 ? ((e.target.value * this.servicefee) / 1000).toFixed(2) : 0;
        },
        // 清空
        emptyInput() {
            this.money = null;
        },
        //全部提现
        moneyAll() {
            this.money = this.usermoney;
        },
        getCode(str) {
            str = str.replace(/\s+/g, "");
            return str.substring(str.length - 4);
        },
        getType(key) {
            return ["储蓄卡", "信用卡"][key];
        },
        // 提现记录
        goToRecord() {
            uni.navigateBack({ delta: 1 });
        },
    },
};
</script>

<style lang="scss" scoped>
.wanl-withdraw .money .symbol {
    font-size: 60rpx;
    margin-right: 10rpx;
}

.wanl-withdraw .money .price {
    display: flex;
    align-items: center;
}
.wanl-withdraw .money .price input {
    /* #ifdef MP */
    height: 100rpx;
    min-height: 100rpx;
    /* #endif */
    width: 100%;
    font-size: 100rpx;
}

.wanl-withdraw .bank {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 20rpx 25rpx;
}
.wanl-withdraw .bank image {
    width: 100rpx;
    height: 100rpx;
    margin-right: 25rpx;
}
.wanl-withdraw .bank .content {
    flex: 1;
}
.btn {
    width: calc(100% - 40rpx);
    height: 100rpx;
    line-height: 100rpx;
    background: linear-gradient(90deg, #00a67a, #057748);
    margin: 0 20rpx;
}
.card {
    background: white;
    margin: 30rpx 0px;
    padding: 20rpx;
}
.btnT {
    background: linear-gradient(90deg, #00a67a, #057748);
    border: 1px solid #eee;
    border-radius: 40rpx;
}
.edgeInsetTop {
    position: relative;
    .box {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 50rpx;
        color: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .title {
            font-size: 28rpx;
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            .num {
                font-size: 60rpx;
                font-weight: bold;
            }
        }
    }
}
</style>
